<template>
  <div class="test">
    <!-- 按钮 -->
    <div class="btns">
      <el-button size="small" type="primary" @click="toAdd">添加</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" size="small">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="gender" label="性别"> </el-table-column>
    </el-table>
    <!-- 模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data (){
    return {
      list:[],
      dialogVisible:false
    }
  },
  methods:{
    toAdd(){
      this.dialogVisible = true;
    }
  }
}
</script>